<template>
	<view>
		<!-- 首页搜索区域 -->
		<view class="home_search">
			<!-- 通过输入框input加上::before来做输入框。后面利用其获取焦点事件进行跳转 -->
			<input type="text" placeholder="搜索你感兴趣的内容" confirm-type="search" placeholder-class="place" @focus="searchHandle"/>
			<view class="message" @click="messageHandle"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 当input输入框获取焦点时，让其进行跳转，跳转到搜索页
			searchHandle () {
				uni.navigateTo({
					url: "../all_search/all_search"
				})
			},
			messageHandle () {
				uni.navigateTo({
					url: "../message/message"
				})
			}
		}
	}
</script>

<style lang="scss">
	.home_search {
		display: flex;
		height: 70rpx;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		margin: 10rpx 0;
		input {
			display: flex;
			align-items: center;
			width:568rpx;
			height:70rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 12rpx 10rpx 0rpx rgba(242,242,242,0.5);
			border-radius:10rpx;
			border:2rpx solid rgba(244,244,244,1);
			padding-left: 30rpx;
			&::before {
				content: ""; // 必须要加
				display: inline-block;  // 必须加，改变其元素分类，让我们可以设置其宽高
				width:20rpx;
				height:20rpx;
				background: rgba(203,208,215,1) url(../../static/sousu.png) no-repeat;
				background-size:cover; // 背景图片的大小需要在背景图片后面添加，在前面加无效
				margin: 0 6rpx;
			}
			.place {
				width:216rpx;
				height:34rpx;
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(166,170,177,1);
				line-height:34rpx;
			}
		}
		.message {
			width: 56rpx;
			height: 56rpx;
			background: url(../../static/tongz.png) center no-repeat;
		}
	}
</style>
